<template>
    <div class="user-profile">
      <div class="user-avatar">
        <img :src="userAvatar" alt="User Avatar" class="avatar" />
      </div>
      <form @submit.prevent="updateProfile">
        <div class="form-group">
          <label for="username">用户名:</label>
          <input type="text" id="username" v-model="username" required readonly />
        </div>
        <div class="form-group">
          <label for="address">收货地址:</label>
          <textarea id="address" v-model="address" required></textarea>
        </div>
        <button type="submit">保存更改</button>
      </form>
    </div>
  </template>
  
  <script>
  import instance from '@/utils/request'
  
  export default {
    data() {
      return {
        userAvatar: '/pictures/kunkun.jpg', 
        username: '',
        address: ''
      };
    },
    created() {
      this.fetchUserProfile();
    },
    methods: {
      async fetchUserProfile() {
        try {
          const response = await instance.get('http://8.219.49.219:8080/onlineShopping/user/profile');
          const userProfile = response.data.data;
          console.log(userProfile)
          this.username = userProfile[0];
          this.address = userProfile[1];
        } catch (error) {
          console.error('Error fetching user profile:', error);
        }
      },
      async updateProfile() {
        try {
          const response = await instance.put('http://8.219.49.219:8080/onlineShopping/user/updateSetting', {
            username: this.username,
            address: this.address
          });
          alert('用户信息已更新');
        } catch (error) {
          console.error('Error updating user profile:', error);
          alert('更新用户信息失败，请检查输入并重试');
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .user-profile {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .user-avatar {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  input[type="text"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  textarea {
    resize: vertical;
    min-height: 100px;
  }
  
  button {
    width: 100%;
    padding: 10px;
    background: #4A90E2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  button:hover {
    background: #3D7DB3;
  }
  </style>
  